<template>
  <div class="result2-container" :style="{maxHeight:clientHeight + 'px'}">
    <div class="result_search">
      <span class="item">身份证号 <input type="text" v-model="searchNum"></span>
      <!--<span class="item">时间 <input type="text" v-model="searchTime"></span>-->
      <span class="item">
            时间
            <DatePicker @on-change="getTime" style="width: 200px;" type="datetimerange" format="yyyy-MM-dd" split-panels
                        placeholder="请选择起止时间"></DatePicker>
          </span>
      <!--<span class="item">种类-->
      <!--<Select v-model="screeningModel" multiple style="width:200px">-->
      <!--<Option v-for="item in screeningItems" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
      <!--</Select>-->
      <!--</span>-->
      <Button type="primary" @click="search">查询</Button>
    </div>
    <p class="screening2-item">
      <!--<span class="one"></span>-->
      <span class="two">病历号</span>
      <span class="one">图像</span>
      <span class="one">用户</span>
      <span class="two">身份证号</span>
      <span class="one">模式</span>
      <span class="two">时间</span>
      <span class="one">操作</span>
    </p>
    <div class="screening2-list" v-for="(item,index) in screeningList">
      <!--<div class="left">-->
      <!--<span>{{item.number}}</span>-->
      <!--<span>{{item.time}}</span>-->
      <!--</div>-->
      <div class="right">
        <span class="two">{{item.medical_num}}</span>
        <span class="one"><img :src="item.url" alt=""></span>
        <span class="one update-info">{{item.owner}}</span>
        <span class="two">{{item.number}}</span>
        <span class="one change-mode">{{item.type==0?'左眼':'右眼'}}</span>
        <span class="two start">{{item.time}}</span>
        <span class="one"><em @click="getDetail(item)">详情</em></span>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import {apiPre, windowOpenUrl} from "../js/config";

  export default {
    name: "result2",
    data() {
      return {
        screeningList: [
          // {
          //     number: '03',
          //     time: '16:07:47',
          //     name: '未命名4',
          //     image: require('../assets/logo.png'),
          //     mode: 0,
          //     status: 0,
          //     medical_num: 'U0001201810150001',
          //     identify_num: '430424200010102654'
          // },
          // {
          //     number: '04',
          //     time: '16:07:47',
          //     name: '未命名4',
          //     image: require('../assets/logo.png'),
          //     mode: 1,
          //     status: 2,
          //     medical_num: 'U0001201810150002',
          //     identify_num: '430424200010102654'
          // }
        ],
        searchNum: '',
        searchTime: [''],
        clientHeight: ''
      }
    },
    methods: {
      getTime(e) {
        console.log('this.searchTime', e)
        this.searchTime = e;
      },
      search() {
        this.getResult({num: this.searchNum, time: this.searchTime})
      },
      getResult(params) {
        axios.get(apiPre + 'result', {params: params}).then((res) => {
          // console.log('result res', res.data.data);
          this.screeningList = res.data.data;
          console.log('res.data.data2222222', this.screeningList)
        }).catch((err) => {
          console.log(err);
        })
      },
      getDetail(item) {
        window.open(windowOpenUrl + item.medical_num);
        // window.open('http://202.197.66.62:20511/#/detail2/' + item.medical_num);
        // var newWindow = window.open('http://localhost:8080/#/detail2/' + item.medical_num);
        // console.log('newWindow',newWindow)
        // var message = 'sssssssss';
        // newWindow.parent.postMessage('ddddd','*')
      }
    },
    mounted() {
      this.search();
      this.clientHeight = document.documentElement.clientHeight - 125;
    }
  }
</script>

<style scoped lang="scss">
  .result2-container {
    position: absolute;
    top: 125px;
    font-family: 'Microsoft YaHei';
    font-size: 20px;
    /*margin: 0 50px;*/
    background-color: rgba(117, 117, 117, 0.5);
    width: 100%;
    z-index: -99;
    overflow-y: scroll;
    .screening2-item {
      display: flex;
      justify-content: space-around;
      font-size: 20px;
      font-family: 'Microsoft YaHei';
      font-weight: bold;
      text-align: center;
      height: 35px;
      line-height: 35px;
      .one {
        flex: 1;
      }
      .two {
        flex: 2;
      }
    }
    .screening2-list {
      &:last-child {
        .right {
          border-bottom: none;
        }
      }
      display: flex;
      justify-content: space-around;
      align-items: center;
      .left {
        flex: 1;
        height: 75px;
        line-height: 75px;
        text-align: center;
        /*background-color: rgb(245, 245, 245);*/
        box-shadow: 5px 5px 5px rgba(207, 207, 207, 0.5);
        background: linear-gradient(rgb(255, 255, 255), rgb(212, 212, 212));
        margin-top: -10px;
        margin-left: -20px;
        span {
          &:first-child {
            color: rgb(169, 72, 102);
          }
          &:last-child {
            font-size: 16px;
          }
        }
      }
      .right {
        flex: 8;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 85px;
        background-color: rgb(245, 245, 245);
        /*margin-left: 5px;*/
        border-bottom: 1px solid rgb(208, 208, 208);
        /*.update-info {*/
        /*cursor: pointer;*/
        /*}*/
        .one {
          flex: 1;
          em {
            font-style: normal;
          }
          em:hover {
            text-decoration: underline;
            cursor: pointer;
          }
        }
        /*.change-mode:hover {*/
        /*cursor: pointer;*/
        /*}*/
        .two {
          flex: 2;
          .start-red {
            color: rgb(169, 72, 102);
          }
          em {
            font-style: normal;
          }
          em:hover {
            text-decoration: underline;
            cursor: pointer;
          }
          input {
            background-color: rgb(182, 182, 182);
            border: none;
            padding: 0 5px;
            border-radius: 4px;
            font-size: 16px;
          }
          input::-webkit-outer-spin-button,
          input::-webkit-inner-spin-button {
            -webkit-appearance: none;
          }
          input[type='number'] {
            -moz-appearance: textfield;
          }
        }
        .start {
          color: rgb(234, 0, 64);
        }
        .finish {
          color: rgb(79, 199, 130);
        }
        .screening {
          color: rgb(213, 168, 0);
        }
        span {
          display: inline-block;
          text-align: center;
          /*margin-left: 15px;*/
        }
        img {
          width: 60px;
          border-radius: 5px;
        }
      }
    }
  }

  //滚动条设置
  /*.result2-container::-webkit-scrollbar{width:14px;}*/
  /*.result2-container::-webkit-scrollbar-track{background-color:#bee1eb;}*/
  /*.result2-container::-webkit-scrollbar-thumb{background-color:#000;}*/
  /*.result2-container::-webkit-scrollbar-thumb:hover {background-color:#000}*/
  /*.result2-container::-webkit-scrollbar-thumb:active {background-color:#00aff0}*/

  .result_search {
    padding: 5px 10px;
    background-color: rgb(255, 255, 255);
    .item {
      margin-right: 20px;
      input {
        height: 30px;
        border: 1px solid #dcdee2;
        border-radius: 4px;
        padding: 0 2px;
      }
    }
    Button {
      float: right;
    }
  }
</style>
